<script setup>
import { ref } from 'vue'

const value2 = ref('')
import {ElMessageBox, ElTable} from 'element-plus'
import Paging from "@/views/system/component/paging.vue";


const User = [
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-08',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-06',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-07',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
]
const tableData=[
  {
    date:'22',
    address:'33',
    address1:'444',
  },
  {
    date:'22',
    address:'33',
    address1:'444',
  },
]
//删除事件
const delEvt = () => {
  ElMessageBox.confirm(
      '确认删除此账号吗？',
      {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
        icon:null,
      }
  )
      .then(() => {
        ElMessage({
          type: 'success',
          message: '删除成功',
        })
      })
      .catch(() => {
      })
}
</script>

<template>
<div>
  <div style="margin-bottom: 10px">账号日志</div>
 <div class="maxBox">
   <header>
       <div class="useBox">
         <el-form-item label="用户账号：">
           <el-input  placeholder="请输入用户账号"/>
         </el-form-item>
       </div>
         <div class="block">
           <span class="demonstration">选择日期：</span>
           <el-date-picker
               v-model="value2"
               type="daterange"
               start-placeholder=""
               end-placeholder=""
               :default-value="[new Date(2010, 9, 1), new Date(2010, 10, 1)]"
               style="width: 180px;"
           />
           <el-button type="primary">查询</el-button>
           <el-button>重置</el-button>

         </div>
         <div class="topBtn">
           <el-button @click="delEvt">批量删除</el-button>
           <el-button type="primary">导出</el-button>
         </div>
   </header>
   <main>
     <div>
       <el-table :data="tableData" border style="width: 100% " :header-cell-style="{ background: '#EEEEEE' ,border: '0.5px solid #DBDBDB'}">
         <el-table-column type="selection" width="55" label="全选"/>
         <el-table-column prop="date" label="账号" width="180" />
         <el-table-column prop="address" label="事件" width="180"/>
         <el-table-column prop="address1" label="添加时间" />

       </el-table>

     </div>
     <div>
       <paging></paging>
       </div>
   </main>
 </div>
</div>
</template>

<style scoped lang="scss">
.maxBox{
  width: 100%;
  background-color: #FFFFFF;
  display: flex;
  border-radius: 10px;
  padding: 20px;
  flex-direction: column;
  header{
    display: flex;
    justify-content: space-between;
    .header{
      display: flex;
      .useBox{
        margin-right: 30px;
      }
      .timeBox{

        display: flex;
      }
      el-form-item{
        width: 100px;
        el-input{
          width: 10px;
        }
      }
    }
  }

}
main{
  display: flex;
  flex-direction: column;
  .paging{
    margin: 20px;
    display: flex;
    justify-content: flex-end;
  }
}

</style>